<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网站设置</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <!-- 配置Tailwind -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#165DFF',
            secondary: '#36CFC9',
            success: '#52C41A',
            warning: '#FAAD14',
            danger: '#FF4D4F',
            dark: '#1D2129',
            'gray-light': '#F2F3F5',
            'gray-medium': '#C9CDD4',
            'gray-dark': '#86909C'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>

  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .transition-height {
        transition: max-height 0.3s ease-in-out;
      }
      .setting-card-hover {
        @apply hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200;
      }
      .setting-toggle {
        @apply relative w-12 h-6 rounded-full cursor-pointer transition-colors duration-300;
      }
      .setting-toggle-dot {
        @apply absolute top-1 left-1 w-4 h-4 bg-white rounded-full transition-transform duration-300;
      }
    }
  </style>

  <style>
    /* 基础动画 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .animate-fade-in {
      animation: fadeIn 0.3s ease-out forwards;
    }

    /* 滚动条美化 */
    ::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    ::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb {
      background: #c1c1c1;
      border-radius: 3px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: #a1a1a1;
    }
  </style>
</head>

<body class="font-inter bg-gray-light text-dark min-h-screen flex flex-col">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-sm sticky top-0 z-50 transition-all duration-300">
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="flex justify-between items-center h-16">
      <!-- Logo和标题 -->
      <div class="flex items-center space-x-3">
        <div class="w-10 h-10 rounded-lg bg-primary flex items-center justify-center text-white">
          <i class="fa fa-cog text-xl"></i>
        </div>
        <h1 class="text-xl font-semibold">设置中心</h1>
      </div>

      <!-- 用户信息和操作 -->
      <div class="flex items-center space-x-4">
        <button id="save-all-btn" class="hidden md:flex items-center px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors duration-200">
          <i class="fa fa-save mr-2"></i>
          <span>保存所有设置</span>
        </button>

        <div class="relative">
          <button id="user-menu-btn" class="flex items-center space-x-2 focus:outline-none">
            <img src="https://picsum.photos/id/64/40/40" alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-gray-medium">
            <span class="hidden md:inline-block font-medium">张小明</span>
            <i class="fa fa-angle-down text-gray-dark"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</header>

<!-- 主要内容区 -->
<main class="flex-grow container mx-auto px-4 sm:px-6 lg:px-8 py-6 md:py-8">
  <div class="flex flex-col lg:flex-row gap-6">
    <!-- 侧边导航 -->
    <aside class="lg:w-64 w-full bg-white rounded-xl shadow-sm p-4 h-fit">
      <nav class="space-y-1">
        <p class="text-xs uppercase text-gray-dark font-medium mb-2 px-3">设置选项</p>

        <a href="#account" class="setting-nav-link flex items-center px-3 py-3 rounded-lg bg-primary/10 text-primary font-medium">
          <i class="fa fa-user-circle w-5 text-center mr-3"></i>
          <span>账户设置</span>
        </a>

        <a href="#privacy" class="setting-nav-link flex items-center px-3 py-3 rounded-lg hover:bg-gray-light transition-colors duration-200">
          <i class="fa fa-lock w-5 text-center mr-3"></i>
          <span>隐私设置</span>
        </a>

        <a href="#notifications" class="setting-nav-link flex items-center px-3 py-3 rounded-lg hover:bg-gray-light transition-colors duration-200">
          <i class="fa fa-bell w-5 text-center mr-3"></i>
          <span>通知设置</span>
        </a>

        <a href="#appearance" class="setting-nav-link flex items-center px-3 py-3 rounded-lg hover:bg-gray-light transition-colors duration-200">
          <i class="fa fa-paint-brush w-5 text-center mr-3"></i>
          <span>外观设置</span>
        </a>

        <a href="#language" class="setting-nav-link flex items-center px-3 py-3 rounded-lg hover:bg-gray-light transition-colors duration-200">
          <i class="fa fa-language w-5 text-center mr-3"></i>
          <span>语言设置</span>
        </a>

        <a href="#security" class="setting-nav-link flex items-center px-3 py-3 rounded-lg hover:bg-gray-light transition-colors duration-200">
          <i class="fa fa-shield w-5 text-center mr-3"></i>
          <span>安全设置</span>
        </a>

        <div class="border-t border-gray-light my-2"></div>

        <a href="#advanced" class="setting-nav-link flex items-center px-3 py-3 rounded-lg hover:bg-gray-light transition-colors duration-200">
          <i class="fa fa-sliders w-5 text-center mr-3"></i>
          <span>高级设置</span>
        </a>

        <a href="#help" class="setting-nav-link flex items-center px-3 py-3 rounded-lg hover:bg-gray-light transition-colors duration-200">
          <i class="fa fa-question-circle w-5 text-center mr-3"></i>
          <span>帮助与支持</span>
        </a>
      </nav>
    </aside>

    <!-- 设置内容区 -->
    <div class="flex-grow space-y-6">
      <!-- 保存提示条 -->
      <div id="save-notification" class="hidden bg-success/10 border border-success/30 text-success rounded-lg p-4 flex items-center justify-between animate-fade-in">
        <div class="flex items-center">
          <i class="fa fa-check-circle mr-2"></i>
          <span>所有设置已保存</span>
        </div>
        <button id="close-notification" class="text-success hover:text-success/80">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <!-- 账户设置 -->
      <section id="account" class="setting-section bg-white rounded-xl shadow-sm p-6 animate-fade-in">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-semibold">账户设置</h2>
          <button class="text-primary text-sm hover:underline">查看完整资料</button>
        </div>

        <div class="space-y-6">
          <!-- 头像设置 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">个人资料照片</h3>

            <div class="flex flex-col sm:flex-row gap-6 items-center">
              <div class="relative">
                <img src="https://picsum.photos/id/64/100/100" alt="当前头像" class="w-24 h-24 rounded-full object-cover border-2 border-gray-light">
                <div class="absolute -bottom-1 -right-1 bg-primary text-white w-8 h-8 rounded-full flex items-center justify-center cursor-pointer hover:bg-primary/90 transition-colors">
                  <i class="fa fa-camera"></i>
                </div>
              </div>

              <div class="flex flex-col gap-3">
                <p class="text-sm text-gray-dark">上传JPG或PNG格式的图片。建议尺寸为200x200像素。</p>
                <div class="flex gap-3">
                  <button class="px-4 py-2 bg-gray-light text-dark rounded-lg hover:bg-gray-medium/30 transition-colors text-sm">
                    <i class="fa fa-upload mr-1"></i> 上传新照片
                  </button>
                  <button class="px-4 py-2 text-gray-dark rounded-lg border border-gray-medium hover:bg-gray-light transition-colors text-sm">
                    移除照片
                  </button>
                </div>
              </div>
            </div>
          </div>

          <!-- 基本信息 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">基本信息</h3>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
              <div>
                <label class="block text-sm font-medium text-gray-dark mb-1">姓名</label>
                <input type="text" value="张小明" class="w-full px-3 py-2 border border-gray-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-dark mb-1">昵称</label>
                <input type="text" value="小明同学" class="w-full px-3 py-2 border border-gray-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-dark mb-1">电子邮箱</label>
                <input type="email" value="zhangxiaoming@example.com" class="w-full px-3 py-2 border border-gray-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
                <p class="text-xs text-gray-dark mt-1">用于登录和接收重要通知</p>
              </div>

              <div>
                <label class="block text-sm font-medium text-gray-dark mb-1">手机号码</label>
                <input type="tel" value="138****5678" class="w-full px-3 py-2 border border-gray-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
                <button class="text-primary text-xs mt-1 hover:underline">修改</button>
              </div>
            </div>
          </div>

          <!-- 个人简介 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">个人简介</h3>

            <textarea rows="4" class="w-full px-3 py-2 border border-gray-medium rounded-lg focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors" placeholder="简单介绍一下自己...">热爱生活，喜欢探索新事物，乐于分享自己的经验和见解。</textarea>
            <p class="text-xs text-gray-dark mt-1">最多可输入200个字符</p>
          </div>

          <div class="flex justify-end">
            <button class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
              保存更改
            </button>
          </div>
        </div>
      </section>

      <!-- 隐私设置 -->
      <section id="privacy" class="setting-section bg-white rounded-xl shadow-sm p-6 hidden">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-semibold">隐私设置</h2>
          <button class="text-primary text-sm hover:underline">查看隐私政策</button>
        </div>

        <div class="space-y-6">
          <!-- 数据可见性 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">数据可见性</h3>

            <div class="space-y-4">
              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">个人资料可见性</p>
                  <p class="text-sm text-gray-dark">控制谁可以查看您的个人资料</p>
                </div>
                <select class="px-3 py-1.5 border border-gray-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
                  <option>所有人可见</option>
                  <option>仅登录用户可见</option>
                  <option>仅好友可见</option>
                  <option>仅自己可见</option>
                </select>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">活动状态</p>
                  <p class="text-sm text-gray-dark">显示您是否在线或最近活跃时间</p>
                </div>
                <label class="setting-toggle bg-primary">
                  <span class="setting-toggle-dot transform translate-x-6"></span>
                </label>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">位置信息</p>
                  <p class="text-sm text-gray-dark">是否在您的动态中显示位置</p>
                </div>
                <label class="setting-toggle bg-gray-medium">
                  <span class="setting-toggle-dot"></span>
                </label>
              </div>
            </div>
          </div>

          <!-- 数据共享 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">数据共享</h3>

            <div class="space-y-4">
              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">第三方应用访问</p>
                  <p class="text-sm text-gray-dark">允许经过认证的第三方应用访问您的部分数据</p>
                </div>
                <label class="setting-toggle bg-primary">
                  <span class="setting-toggle-dot transform translate-x-6"></span>
                </label>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">个性化广告</p>
                  <p class="text-sm text-gray-dark">基于您的兴趣显示个性化广告</p>
                </div>
                <label class="setting-toggle bg-gray-medium">
                  <span class="setting-toggle-dot"></span>
                </label>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">分享使用统计</p>
                  <p class="text-sm text-gray-dark">匿名分享您的使用数据以帮助我们改进服务</p>
                </div>
                <label class="setting-toggle bg-primary">
                  <span class="setting-toggle-dot transform translate-x-6"></span>
                </label>
              </div>
            </div>
          </div>

          <!-- 数据导出与删除 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">数据管理</h3>

            <div class="space-y-4">
              <button class="w-full flex justify-between items-center p-3 border border-gray-medium rounded-lg hover:bg-gray-light transition-colors">
                <div>
                  <p class="font-medium">导出个人数据</p>
                  <p class="text-sm text-gray-dark">获取您在本平台的所有数据副本</p>
                </div>
                <i class="fa fa-download text-primary"></i>
              </button>

              <button class="w-full flex justify-between items-center p-3 border border-danger/30 rounded-lg hover:bg-danger/5 transition-colors text-danger">
                <div>
                  <p class="font-medium">删除账户</p>
                  <p class="text-sm">永久删除您的账户和所有数据</p>
                </div>
                <i class="fa fa-trash"></i>
              </button>
            </div>
          </div>

          <div class="flex justify-end">
            <button class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
              保存更改
            </button>
          </div>
        </div>
      </section>

      <!-- 通知设置 -->
      <section id="notifications" class="setting-section bg-white rounded-xl shadow-sm p-6 hidden">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-semibold">通知设置</h2>
          <button class="text-sm px-3 py-1.5 bg-gray-light rounded-lg hover:bg-gray-medium/30 transition-colors">
            全部启用
          </button>
        </div>

        <div class="space-y-6">
          <!-- 通知总开关 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <div class="flex justify-between items-center">
              <div>
                <p class="font-medium">接收通知</p>
                <p class="text-sm text-gray-dark">开启或关闭所有通知</p>
              </div>
              <label class="setting-toggle bg-primary">
                <span class="setting-toggle-dot transform translate-x-6"></span>
              </label>
            </div>
          </div>

          <!-- 通知方式 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">通知方式</h3>

            <div class="space-y-4">
              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">站内通知</p>
                  <p class="text-sm text-gray-dark">在网站内显示通知</p>
                </div>
                <label class="setting-toggle bg-primary">
                  <span class="setting-toggle-dot transform translate-x-6"></span>
                </label>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">电子邮件</p>
                  <p class="text-sm text-gray-dark">通过邮件发送通知</p>
                </div>
                <label class="setting-toggle bg-primary">
                  <span class="setting-toggle-dot transform translate-x-6"></span>
                </label>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">手机短信</p>
                  <p class="text-sm text-gray-dark">通过短信发送重要通知</p>
                </div>
                <label class="setting-toggle bg-gray-medium">
                  <span class="setting-toggle-dot"></span>
                </label>
              </div>
            </div>
          </div>

          <!-- 通知类型 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">通知类型</h3>

            <div class="space-y-4">
              <div>
                <div class="flex justify-between items-center mb-2">
                  <p class="font-medium">社交互动</p>
                  <label class="setting-toggle bg-primary">
                    <span class="setting-toggle-dot transform translate-x-6"></span>
                  </label>
                </div>

                <div class="pl-6 space-y-3">
                  <div class="flex justify-between items-center">
                    <p class="text-sm">有人关注我</p>
                    <label class="setting-toggle bg-primary">
                      <span class="setting-toggle-dot transform translate-x-6"></span>
                    </label>
                  </div>

                  <div class="flex justify-between items-center">
                    <p class="text-sm">有人评论我的内容</p>
                    <label class="setting-toggle bg-primary">
                      <span class="setting-toggle-dot transform translate-x-6"></span>
                    </label>
                  </div>

                  <div class="flex justify-between items-center">
                    <p class="text-sm">有人点赞我的内容</p>
                    <label class="setting-toggle bg-gray-medium">
                      <span class="setting-toggle-dot"></span>
                    </label>
                  </div>
                </div>
              </div>

              <div class="border-t border-gray-light pt-4">
                <div class="flex justify-between items-center mb-2">
                  <p class="font-medium">系统通知</p>
                  <label class="setting-toggle bg-primary">
                    <span class="setting-toggle-dot transform translate-x-6"></span>
                  </label>
                </div>

                <div class="pl-6 space-y-3">
                  <div class="flex justify-between items-center">
                    <p class="text-sm">账户相关更新</p>
                    <label class="setting-toggle bg-primary">
                      <span class="setting-toggle-dot transform translate-x-6"></span>
                    </label>
                  </div>

                  <div class="flex justify-between items-center">
                    <p class="text-sm">新功能通知</p>
                    <label class="setting-toggle bg-primary">
                      <span class="setting-toggle-dot transform translate-x-6"></span>
                    </label>
                  </div>
                </div>
              </div>

              <div class="border-t border-gray-light pt-4">
                <div class="flex justify-between items-center mb-2">
                  <p class="font-medium">营销信息</p>
                  <label class="setting-toggle bg-gray-medium">
                    <span class="setting-toggle-dot"></span>
                  </label>
                </div>

                <div class="pl-6 space-y-3">
                  <div class="flex justify-between items-center">
                    <p class="text-sm">促销活动</p>
                    <label class="setting-toggle bg-gray-medium">
                      <span class="setting-toggle-dot"></span>
                    </label>
                  </div>

                  <div class="flex justify-between items-center">
                    <p class="text-sm">新品发布</p>
                    <label class="setting-toggle bg-gray-medium">
                      <span class="setting-toggle-dot"></span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div class="flex justify-end">
            <button class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
              保存更改
            </button>
          </div>
        </div>
      </section>

      <!-- 外观设置 -->
      <section id="appearance" class="setting-section bg-white rounded-xl shadow-sm p-6 hidden">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-semibold">外观设置</h2>
          <button class="text-sm px-3 py-1.5 bg-gray-light rounded-lg hover:bg-gray-medium/30 transition-colors">
            恢复默认
          </button>
        </div>

        <div class="space-y-6">
          <!-- 主题设置 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">主题模式</h3>

            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
              <div class="border-2 border-primary rounded-lg p-4 cursor-pointer hover:bg-gray-light transition-colors">
                <div class="w-full h-8 bg-white border border-gray-medium rounded mb-3"></div>
                <p class="font-medium text-center">浅色模式</p>
              </div>

              <div class="border-2 border-gray-medium rounded-lg p-4 cursor-pointer hover:bg-gray-light transition-colors">
                <div class="w-full h-8 bg-dark border border-gray-dark rounded mb-3"></div>
                <p class="font-medium text-center">深色模式</p>
              </div>

              <div class="border-2 border-gray-medium rounded-lg p-4 cursor-pointer hover:bg-gray-light transition-colors">
                <div class="w-full h-8 bg-gradient-to-r from-white to-dark border border-gray-medium rounded mb-3"></div>
                <p class="font-medium text-center">跟随系统</p>
              </div>
            </div>
          </div>

          <!-- 布局设置 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">布局设置</h3>

            <div class="space-y-4">
              <div>
                <div class="flex justify-between items-center mb-1">
                  <p class="font-medium">页面宽度</p>
                  <span id="width-value" class="text-sm font-medium">100%</span>
                </div>
                <input type="range" min="80" max="100" value="100" class="w-full h-2 bg-gray-light rounded-lg appearance-none cursor-pointer accent-primary">
                <div class="flex justify-between text-xs text-gray-dark mt-1">
                  <span>紧凑</span>
                  <span>标准</span>
                  <span>宽松</span>
                </div>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">显示侧边栏</p>
                  <p class="text-sm text-gray-dark">在浏览内容时显示侧边导航</p>
                </div>
                <label class="setting-toggle bg-primary">
                  <span class="setting-toggle-dot transform translate-x-6"></span>
                </label>
              </div>

              <div class="flex justify-between items-center">
                <div>
                  <p class="font-medium">卡片式布局</p>
                  <p class="text-sm text-gray-dark">使用卡片样式展示内容</p>
                </div>
                <label class="setting-toggle bg-primary">
                  <span class="setting-toggle-dot transform translate-x-6"></span>
                </label>
              </div>
            </div>
          </div>

          <!-- 字体设置 -->
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">字体设置</h3>

            <div class="space-y-4">
              <div>
                <label class="block text-sm font-medium text-gray-dark mb-1">字体选择</label>
                <select class="w-full px-3 py-2 border border-gray-medium rounded-lg bg-white focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary transition-colors">
                  <option selected>系统默认</option>
                  <option>Inter</option>
                  <option>Roboto</option>
                  <option>Open Sans</option>
                  <option>Noto Sans</option>
                </select>
              </div>

              <div>
                <div class="flex justify-between items-center mb-1">
                  <p class="font-medium">字体大小</p>
                  <span id="font-size-value" class="text-sm font-medium">16px</span>
                </div>
                <input type="range" min="14" max="20" value="16" class="w-full h-2 bg-gray-light rounded-lg appearance-none cursor-pointer accent-primary">
                <div class="flex justify-between text-xs text-gray-dark mt-1">
                  <span>小</span>
                  <span>中</span>
                  <span>大</span>
                </div>
              </div>
            </div>
          </div>

          <div class="flex justify-end">
            <button class="px-5 py-2.5 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
              保存更改
            </button>
          </div>
        </div>
      </section>

      <!-- 其他设置部分将通过JavaScript动态显示 -->
      <section id="language" class="setting-section bg-white rounded-xl shadow-sm p-6 hidden">
        <div class="flex justify-between items-center mb-6">
          <h2 class="text-xl font-semibold">语言设置</h2>
          <button class="text-primary text-sm hover:underline">查看所有语言</button>
        </div>

        <div class="space-y-6">
          <div class="setting-card setting-card-hover p-4 rounded-lg border border-gray-light">
            <h3 class="font-medium mb-4">界面语言</h3>

            <div class="space-y-3">
              <div class="flex items-center p-3 border-2 border-primary rounded-lg bg-primary/5">
                <input type="radio" name="language" id="lang-zh" checked class="w-4 h-4 accent-primary">
                <label for="lang-zh" class="ml-3 flex-grow">简体中文</label>
                <span class="text-sm text-gray-dark">默认</span>
              </div>

              <div class="flex items-center p-3 border border-gray-medium rounded-lg hover:bg-gray-light transition-colors">
                <input type="radio" name="language" id="lang-en" class="w-4 h-4 accent-primary">
                <label for="lang-en" class="ml-3">English</label>
              </div>

